import React, { Fragment, useState } from "react";
import index from "./index.css";
export default function Content(props) {
  const [carItem, setCarItem] = useState([]);
  // console.log("props", props);
  //获取图片文件夹里面的内容
  // let files = require
  //   .context("../../../images/products images/", true, /\.webp$/)
  //   .keys();
  // const imagesList = files.filter((item) => item.includes("-1-product.webp"));
  // const contentList = imagesList.map((item) => {
  //   return (
  //     <div>
  //       <img
  //         src={require("../../../images/products images/" +
  //           item.split("./")[1])}
  //         className="contentList"
  //       />
  //     </div>
  //   );
  // });
  //把商品加到购物车里面
  const addCar = (item) => {
    setCarItem([...carItem, item]);
    props.handleChildValue([...carItem, item]);
  };
  const contentList = props.allDataList.map((item, index) => {
    return (
      <div key={index}>
        <img
          alt=""
          src={require("../../../images/products images/" +
            item.sku +
            "-1-product.webp")}
          className="contentList"
        />
        <div className="contentBox">
          <div className="title">{item.title}</div>
          <div className="price">
            {item.currencyFormat}
            {item.price}
          </div>
          <div className="smallPrice">
            or {item.installments}×{item.currencyFormat}
            {(item.price / item.installments).toFixed(2)}
          </div>
        </div>
        <button className="btn" onClick={() => addCar(item)}>
          Add to cart
        </button>
      </div>
    );
  });

  return (
    <Fragment>
      <h2>{props.count} Product(s) found</h2>
      <div>
        <div className="contentListStyle">{contentList}</div>
      </div>
    </Fragment>
  );
}
